<template>
	<el-card shadow="hover" header="更新记录">
		<template #header>
			<el-icon style="display: inline; vertical-align: middle"> <ele-DocumentCopy /> </el-icon>
			<span style=""> 更新记录 </span>
			<el-button type="primary" icon="ele-Refresh" round plain @click="refresh" style="float: right">更新记录</el-button>
		</template>
		<div class="commit" v-loading="state.loading">
			<el-timeline style="max-width: 600px" v-if="state.list.length > 0">
				<el-timeline-item v-for="(item, index) in state.list" :key="index" :timestamp="formatDate(new Date(item.commitDate), 'YYYY-mm-dd HH:MM:SS')">
					<el-link style="white-space: pre-line; word-break: break-all" :href="item.html_url" target="_blank"> {{ item.message }}</el-link>
				</el-timeline-item>
			</el-timeline>
			<el-empty v-else description="空"></el-empty>
		</div>
	</el-card>
</template>

<script lang="ts">
export default {
	title: '更新记录',
	icon: 'ele-DocumentCopy',
	description: '当前项目更新记录',
};
</script>

<script setup lang="ts" name="commit">
import { reactive, onMounted } from 'vue';
import { formatDate } from '/@/utils/formatTime';

const state = reactive({
	loading: false,
	list: [] as any,
});

const getList = () => {
	// axios({
	// 	method: 'get',
	// 	url: 'https://gitee.com/api/v5/repos/zuohuaijun/Admin.NET/commits',
	// 	params: {
	// 		page: 1,
	// 		per_page: 10,
	// 	},
	// }).then((res: any) => {
	// 	state.list = res.data;
	// 	state.loading = false;
	// });

	state.list = [    
		{
			commitDate: "2024-10-26 22:04:22",
			html_url: "",
			message: "😎批量收款开发并支持线上excel 。"
		}, 
	    {
			commitDate: "2024-09-02 22:58:25",
			html_url: "",
			message: "🌈和何亮沟通，并优化页面细节。V1版本 开发完毕。"
		}, 
		{
			commitDate: "2024-09-02 22:58:25",
			html_url: "",
			message: "😎客户档案新增、修改、删除导入等开发。"
		}, {
			commitDate: "2024-09-01 23:40:51",
			html_url: "",
			message: "🦄完成客户档案列表开发。"
		}, {
			commitDate: "2024-08-31 20:29:30",
			html_url: "",
			message: "基础权限与底层数据权限整理。"
		}, {
			commitDate: "2024-08-30 01:53:29",
			html_url: "",
			message: "😎与何亮沟通，并完成框架的初版搭建工作。"
		}];
	state.loading = false;
};

const refresh = () => {
	state.loading = true;
	getList();
};

onMounted(() => {
	state.loading = true;
	getList();
});
</script>

<style scoped>
.progress {
	text-align: center;
}
.progress .percentage-value {
	font-size: 28px;
}
.progress .percentage-label {
	font-size: 12px;
	margin-top: 10px;
}
.commit {
	max-height: 500px;
	overflow: auto;
}
</style>
